<template>
    <rx-fit>
        <div class="itmsFont">
            <ul>
                <li class="item-li" v-for="menu in curMenus"
                    :class="{ itemClass:(menu.children && menu.children.length>0)}">
                    <div class="itmsBos" v-if="menu.children && menu.children.length>0">
                        <header>{{ $i18(menu.title,'菜单名称')}}</header>
                        <ul>
                            <li v-for="subMenu in menu.children" @click="handMenuClick(subMenu)" class="item-li">
                                <div class="item-icon-box">
                                    <template v-if="!subMenu.icon.includes('type')">
                                        <a-icon :type="subMenu.icon"></a-icon>
                                    </template>
                                    <template v-else-if="customArr.includes(JSON.parse(subMenu.icon).type)">
                                        <my-icon :type="JSON.parse(subMenu.icon).icon"></my-icon>
                                    </template>
                                    <template v-else>
                                        <a-icon :type="JSON.parse(subMenu.icon).icon"></a-icon>
                                    </template>
                                </div>
                                <p>
                                    <span class="spanlist">{{ $i18(subMenu.title,'菜单名称')}}</span>
                                </p>
                            </li>
                        </ul>
                    </div>
                    <div class="itmsBos2" v-if="!menu.children || menu.children.length==0"
                         :class="{ itemClass2:(menu.children && menu.children.length == 0)}"
                         @click="handMenuClick(menu)">
                        <div class="item-icon-box">
                            <template v-if="!menu.icon.includes('type')">
                                <a-icon :type="menu.icon"></a-icon>
                            </template>
                            <template v-else-if="customArr.includes(JSON.parse(menu.icon).type)">
                                <my-icon :type="JSON.parse(menu.icon).icon"></my-icon>
                            </template>
                            <template v-else>
                                <a-icon :type="JSON.parse(menu.icon).icon"></a-icon>
                            </template>
                        </div>
                        <p>
                            <span class="spanlist">{{ $i18(menu.title,'菜单名称')}}</span>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
    </rx-fit>
</template>

<script>
import {RxFit, Util} from "@lowcode/jpaas-common-lib"
import DialogView from "@/layouts/DialogView";
import {getComponent, getSelectMenus} from "@/utils/routerUtil";
import {mapMutations, mapState} from 'vuex'
import router from "@/router";

export default {
    name: "MenuViewFunsBlock",
    props: {
        //menuId: String
    },
    components: {
        RxFit
    },
    computed: {
        ...mapState({
            menuMap: state => state.appSetting.menuMap,
            rootPath: state => state.user.rootPath,
            appKey: state => state.appSetting.appKey,
            menus: state => state.appSetting.menus,
            navigation: (state) => state.appSetting.navigation,
            appmenuId: (state) => state.appSetting.appmenuId,
            frontType:state => state.appSetting.frontType
        }),
        navTabs(){
            return this.navigation[this.frontType];
        }
    },

    data() {
        return {
            customArr: ['customIcon', 'userCustomIcon','jpaasIcon'],
            curMenus: [],
            itemClass: '',
            curMenuId: '',
        }
    },
    created() {
        this.initMenus();
    },
    methods: {
        ...mapMutations('appSetting', ['setMenuPath', "setSelecteKeys", 'setActiveKey', 'setAppMenuId', 'setNavigation']),

        initMenus() {
            this.curMenuId = this.appmenuId;
            this.curMenus = getSelectMenus(this.menus, this.appmenuId);
        },
        handMenuClick(item) {
            //添加面包屑
            var showType = item.showType;
            if(!['POP_WIN','NEW_PAGE'].includes(showType)){
                this.bread(item)
            }

            if (!showType || showType == 'URL') {
                //URL访问
                this.openUrl(item);
            } else if (showType == 'POP_WIN') {
                //弹窗
                this.openPopWin(item);
            } else if (showType == 'NEW_WIN') {
                //新窗口
                this.openNewWin(item);
            } else if (showType == 'FUNS') {
                //功能面板集（标签）
                this.openFuns(item, 'funs');
            } else if (showType == 'FUNS_BLOCK') {
                //功能面板集（单页）
                this.openFuns(item, 'funsBlock');
            } else if (showType == 'FUN') {
                //功能面板
                this.openFuns(item, 'fun');
            }if(showType == 'NEW_PAGE'){//新窗口（固定路由）
                this.openNewPage(item);
                return ;
            }
        },
        openNewPage(item){//打开新窗口（固定路由）
            let _params = '';
            if(item.params){
                _params = item.params.indexOf('{') > -1 ? eval( '('+ item.params +')') : '' ;
            }
            let obj=this.$router.resolve({
                name:item.key,
                query:_params
            });
            let url=obj.href;
            window.open(url,"_blank" );
        },
        openPopWin(item) {
            var data = {};
            if (item.settingType == 'iframe') {
                data.url = item.params;
            } else {
                data.menu = item;
                data.currentView = getComponent(item);
            }
            var conf = {
                component: DialogView,
                curVm: this,
                max: true,
                title: this.$i18(item.title),
                data: data
            };
            Util.open(conf, function (action, data) {});
        },
        openNewWin(item) {
            var path = process.env.VUE_APP_ADMIN_FRONT;
            var aryMenuPath = this.getMenuPath(item.id);
            var url = this.rootPath + path;
            for (var i = 0; i < aryMenuPath.length; i++) {
                if (i == 0) {
                    url += '/' + aryMenuPath[i].menuKey + '/home';
                    continue;
                }
                url += '/' + aryMenuPath[i].menuKey;
            }
            window.open(url, '_blank');
        },
        openUrl(item) {
            var name = item.key;
            var pathParams = {name: name};
            if(item.appType=='1'){
              pathParams.query={appId:item.appId};
            }
            this.setSelecteKeys([item.key]);
            pathParams.params = {menuId: item.id};
            /*       if (item.params) {
                     pathParams.params.params = item.params;
                   }*/
            this.setAppMenuId(pathParams.params.menuId);
            this.generatePath(item.id);
            this.$router.push(pathParams);
        },
        openFuns(item, name) {
            var pathParams = {name: name};
            if(item.appType=='1'){
              pathParams.query={appId:item.appId};
            }
            this.setSelecteKeys([item.key]);
            pathParams.params = {menuId: item.id};
            this.setAppMenuId(pathParams.params.menuId);
            this.generatePath(item.id);
            item.params = pathParams.params;
            this.$router.push(pathParams);
        },
        generatePath(id) {
            var aryMenuPath = this.getMenuPath(id);
            //将菜单路径发布到VUEX
            this.setMenuPath(aryMenuPath)
        },
        getMenuPath(id) {
            var aryMenuPath = [];
            var obj = this.menuMap[id];
            aryMenuPath.push(obj)

            while (obj.parentId != '0') {
                obj = this.menuMap[obj.parentId];
                aryMenuPath.unshift(obj);
            }
            return aryMenuPath;
        },
        //面包屑
        bread(item) {

            for (var nav of this.navTabs) {
                if (nav.key == item.key) {
                    this.setActiveKey(item.key)
                    return
                }
            }
            this.setActiveKey(item.key);


            this.navigation[this.frontType].push(item);

        },
    },
    watch: {
        appmenuId() {
            this.initMenus()
        }
    },
}
</script>

<style scoped>
.spanlist {
    width: 100%;
    display: block;
    text-align: center;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    padding: 0 4px;
}

.itmsBos2 p {
    margin-top: 6px;
}

.itmsBos2 {
    overflow: hidden;
    height: 110px;
    border-radius: 6px;
    border: 1px solid transparent;
}

.itmsFont {
    font-size: 0;
    padding: 10px 10px 0;
}

.itmsBos {
    font-size: 14px;
    border-radius: 6px;
    background: #fff;
    margin: 0 6px;
    margin-bottom: 12px;
}

.itmsBos header {
    line-height: 40px;
    padding-left: 20px;
    border-bottom: 1px solid #eef2f4;
}

.itmsBos ul {
    font-size: 0;
    padding-top: 10px;
    margin: 0 6px;
}

.itmsBos ul li {
    vertical-align: middle;
    font-size: 14px;
    width: 12.5%;
    display: inline-block;
    color: #555;
    text-align: center;
}


.itmsBos ul li p {
    margin-top: 6px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.itmsFont > ul {
    display: flex;
    flex-flow: wrap;

}

.item-icon-box {
    width: 60px;
    height: 60px;
    margin: auto;
    text-align: center;
    border-radius: 50%;
    background: #09bcb9;
    color: white;
    margin-top: 15px;
}


.itmsFont .item-li {
    width: 100px;
    height: 110px;
    border-radius: 6px;
    margin-right: 15px;
    margin-bottom: 10px;
    position: relative;
    background: white;
}

.itmsFont .itmsBos li:hover {
    border: 1px solid #4D9EFF;
}

.itmsFont .itmsBos2:hover {
    border-color:#4D9EFF;
}

.item-li.itemClass .item-li:hover {
    top: -2px;
    box-shadow: 0 6px 18px 2px #e0e5e7;
}

.itmsFont .item-li p {
    font-size: 14px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    min-height: 42px;
}

.itmsFont .item-li p > span {
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}

.itmsFont .item-li p:before {
    content: '';
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
}

.itmsFont .itemClass {
    width: 100%;
    margin-right: 0;
    height: auto;
    padding-bottom: 0;
}

.item-icon-box i {
    font-size: 30px;
    line-height: 60px;
}

.itmsFont ul li:nth-child(1) .item-icon-box {
    background-color: #0595fe;
}

.itmsFont ul li:nth-child(2) .item-icon-box {
    background-color: #458bff;
}

.itmsFont ul li:nth-child(3n) .item-icon-box {
    background-color: #09bcb9;
}

.itmsFont ul li:nth-child(4n) .item-icon-box {
    background-color: #76d32c;
}

.itmsFont ul li:nth-child(5n) .item-icon-box {
    background-color: #f0cb39;
}
</style>